<template>
  <div class="container">
    <div>四角边框</div>
    <h3>背景实现四角边框</h3>
  </div>
</template>

<script>
/*

// 多重背景
#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

// 简写
#example1 {
  background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

1，颜色渐变
// 从上到下，蓝色渐变到红色 
linear-gradient(blue, red);
// 渐变轴为45度，从蓝色渐变到红色 
linear-gradient(45deg, blue, red);
// 从右下到左上、从蓝色渐变到红色 
linear-gradient(to left top, blue, red);
// 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 
linear-gradient(0deg, blue, green 40%, red);





background-size: length（宽高）|percentage（父元素百分比）|cover（完全覆盖，图片截取）|contain（图片完全展现，可能铺不满）;

*/
</script>


<style scoped lang="scss">
.container > div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);

  width: 100px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  //画一条线
  // background:linear-gradient(to left, blue, red) left top no-repeat;
  // background-size: 2px 20px;

  // 画多条线 
  background: 
    linear-gradient(to left, blue, red) left top no-repeat,
    linear-gradient(to bottom, blue, red) left top no-repeat,
    linear-gradient(to left, blue, red) right top no-repeat,
    linear-gradient(to bottom, blue, red) right top no-repeat,
    linear-gradient(to left, blue, red) right bottom no-repeat,
    linear-gradient(to bottom, blue, red) right bottom no-repeat,
    linear-gradient(to left, blue, red) left bottom no-repeat,
    linear-gradient(to bottom, blue, red) left bottom no-repeat;

  // 上面八组背景，循环使用下面两组size (也可以写8组，都不一样的边)
  background-size: 2px 20px, 20px 2px;
}
</style>
